<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>callmepieman.com styleguide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="src/docs/styleguide.css">

</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">callmepieman.com styleguide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-base.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Base</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-components.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Components</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-debug">
                <span class="kss-nav__ref ">2.1</span
                ><span class="kss-nav__name">Debug.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-fold">
                <span class="kss-nav__ref ">2.2</span
                ><span class="kss-nav__name">Fold components.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-form">
                <span class="kss-nav__ref ">2.3</span
                ><span class="kss-nav__name">Form.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-form-error">
                <span class="kss-nav__ref kss-nav__ref-child">2.3.1</span
                ><span class="kss-nav__name">Form error.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-form-input">
                <span class="kss-nav__ref kss-nav__ref-child">2.3.2</span
                ><span class="kss-nav__name">Form input.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-form-label">
                <span class="kss-nav__ref kss-nav__ref-child">2.3.3</span
                ><span class="kss-nav__name">Form label.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-form-submit">
                <span class="kss-nav__ref kss-nav__ref-child">2.3.4</span
                ><span class="kss-nav__name">Form submit.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-icon">
                <span class="kss-nav__ref ">2.4</span
                ><span class="kss-nav__name">Icon component.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-icon-add">
                <span class="kss-nav__ref kss-nav__ref-child">2.4.1</span
                ><span class="kss-nav__name">Add icon.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-components.html#kssref-components-icon-default">
                <span class="kss-nav__ref kss-nav__ref-child">2.4.2</span
                ><span class="kss-nav__name">Default icon.</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-dependencies.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Dependencies</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-regions.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Regions</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-components" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-components">
          <span class="kss-title__ref">
              2
            <span class="kss-title__permalink-hash">
                #components
            </span>
          </span>
          Components
        </a>
      </h1>


      <div class="kss-description">
        <p>Components are partials of the page.</p>

      </div>
    </div>


      </div>
      <section id="kssref-components-debug" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-components-debug">
          <span class="kss-title__ref">
              2.1
            <span class="kss-title__permalink-hash">
                #components.debug
            </span>
          </span>
          Debug.
        </a>
      </h2>


      <div class="kss-description">
        <p>Debug component</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="debug color-black">.debug</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;debug color-black&quot;&gt;.debug&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-fold" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-components-fold">
          <span class="kss-title__ref">
              2.2
            <span class="kss-title__permalink-hash">
                #components.fold
            </span>
          </span>
          Fold components.
        </a>
      </h2>


      <div class="kss-description">
        <p>Fold/unfold action.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="fold color-black">.fold
    <div class="progress empty-m">
        <div class="progress-bar">.fold-form--folded</div>
    </div>
    <button class="fold-trigger--folded color-black">.fold-trigger--folded</button>
    <div class="fold-form fold-form--unfolded empty-m debug">
        <div class="color-black form-fold--status">.form-form--unfolded</div>
    </div>
</div>
<script type="text/javascript" charset="utf-8"">
 document.addEventListener("DOMContentLoaded", () => {
    const $foldForm = $('.fold-form');
    const $foldTrigger = $('.fold-trigger--folded');
    const $progress = $('progress');
    $foldTrigger.on('click', (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();
        $(".progress-bar").toggleClass("progress-start")
        $foldForm.toggleClass('fold-form--folded');
        $foldForm.toggleClass('fold-form--unfolded');
    });
 });
</script>


        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;fold color-black&quot;&gt;.fold
    &lt;div class=&quot;progress empty-m&quot;&gt;
        &lt;div class=&quot;progress-bar&quot;&gt;.fold-form--folded&lt;/div&gt;
    &lt;/div&gt;
    &lt;button class=&quot;fold-trigger--folded color-black&quot;&gt;.fold-trigger--folded&lt;/button&gt;
    &lt;div class=&quot;fold-form fold-form--unfolded empty-m debug&quot;&gt;
        &lt;div class=&quot;color-black form-fold--status&quot;&gt;.form-form--unfolded&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&quot;&gt;
 document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
    const $foldForm = $(&#x27;.fold-form&#x27;);
    const $foldTrigger = $(&#x27;.fold-trigger--folded&#x27;);
    const $progress = $(&#x27;progress&#x27;);
    $foldTrigger.on(&#x27;click&#x27;, (e) =&gt; {
        e.preventDefault();
        e.stopImmediatePropagation();
        $(&quot;.progress-bar&quot;).toggleClass(&quot;progress-start&quot;)
        $foldForm.toggleClass(&#x27;fold-form--folded&#x27;);
        $foldForm.toggleClass(&#x27;fold-form--unfolded&#x27;);
    });
 });
&lt;/script&gt;

</code></pre>
      </div>

      </section>
      <section id="kssref-components-form" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-components-form">
          <span class="kss-title__ref">
              2.3
            <span class="kss-title__permalink-hash">
                #components.form
            </span>
          </span>
          Form.
        </a>
      </h2>


      <div class="kss-description">
        <p>Define form component.</p>

      </div>
    </div>


      </section>
      <section id="kssref-components-form-error" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-form-error">
          <span class="kss-title__ref">
              2.3.1
            <span class="kss-title__permalink-hash">
                #components.form.error
            </span>
          </span>
          Form error.
        </a>
      </h3>


      <div class="kss-description">
        <p>Default error form style.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form color-black">.form
    <div class="form-error">
        .form-error
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form color-black&quot;&gt;.form
    &lt;div class=&quot;form-error&quot;&gt;
        .form-error
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-form-input" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-form-input">
          <span class="kss-title__ref">
              2.3.2
            <span class="kss-title__permalink-hash">
                #components.form.input
            </span>
          </span>
          Form input.
        </a>
      </h3>


      <div class="kss-description">
        <p>Default input style.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form color-black">.form
    <input type="text"
           placeholder=".form-input"
           class="form-input" />
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form color-black&quot;&gt;.form
    &lt;input type=&quot;text&quot;
           placeholder=&quot;.form-input&quot;
           class=&quot;form-input&quot; /&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-form-label" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-form-label">
          <span class="kss-title__ref">
              2.3.3
            <span class="kss-title__permalink-hash">
                #components.form.label
            </span>
          </span>
          Form label.
        </a>
      </h3>


      <div class="kss-description">
        <p>Default label style.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form color-black">.form
    <label for="form-label"
           class="form-label">
        .form-label
    </label>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form color-black&quot;&gt;.form
    &lt;label for=&quot;form-label&quot;
           class=&quot;form-label&quot;&gt;
        .form-label
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-form-submit" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-form-submit">
          <span class="kss-title__ref">
              2.3.4
            <span class="kss-title__permalink-hash">
                #components.form.submit
            </span>
          </span>
          Form submit.
        </a>
      </h3>


      <div class="kss-description">
        <p>Default submit button style.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form color-black">.form
    <input type="submit"
           class="form-submit"
           value=".form-submit" />
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form color-black&quot;&gt;.form
    &lt;input type=&quot;submit&quot;
           class=&quot;form-submit&quot;
           value=&quot;.form-submit&quot; /&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-icon" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-components-icon">
          <span class="kss-title__ref">
              2.4
            <span class="kss-title__permalink-hash">
                #components.icon
            </span>
          </span>
          Icon component.
        </a>
      </h2>


    </div>


      </section>
      <section id="kssref-components-icon-add" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-icon-add">
          <span class="kss-title__ref">
              2.4.1
            <span class="kss-title__permalink-hash">
                #components.icon.add
            </span>
          </span>
          Add icon.
        </a>
      </h3>


      <div class="kss-description">
        <p>Icon rotate to be a cancel icon.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="icon empty-m color-black">
    <div>
        <button class="icon-add--text kss-add--off">toggle to class: .icon-add</button>
    </div>
    <i class="icon-default fa fa-plus kss-action--add"></i>
</div>

<script type="text/javascript" charset="utf-8"">
 document.addEventListener("DOMContentLoaded", () => {
     const $actionIconAdd = $(".kss-action--add");

     $(".icon-add--text").on("click", function (e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         if ($(this).hasClass("kss-add-off")) {
            $(this).html("toggle to class .icon-add");
         } else {
            $(this).html("toggle to class .icon-default");
         }

         $(this).toggleClass("kss-add-off");
         $(this).toggleClass("kss-add-on");

         $actionIconAdd.toggleClass("icon-add");
         $actionIconAdd.toggleClass("icon-default");
     });

 });
</script>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;icon empty-m color-black&quot;&gt;
    &lt;div&gt;
        &lt;button class=&quot;icon-add--text kss-add--off&quot;&gt;toggle to class: .icon-add&lt;/button&gt;
    &lt;/div&gt;
    &lt;i class=&quot;icon-default fa fa-plus kss-action--add&quot;&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&quot;&gt;
 document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
     const $actionIconAdd = $(&quot;.kss-action--add&quot;);

     $(&quot;.icon-add--text&quot;).on(&quot;click&quot;, function (e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         if ($(this).hasClass(&quot;kss-add-off&quot;)) {
            $(this).html(&quot;toggle to class .icon-add&quot;);
         } else {
            $(this).html(&quot;toggle to class .icon-default&quot;);
         }

         $(this).toggleClass(&quot;kss-add-off&quot;);
         $(this).toggleClass(&quot;kss-add-on&quot;);

         $actionIconAdd.toggleClass(&quot;icon-add&quot;);
         $actionIconAdd.toggleClass(&quot;icon-default&quot;);
     });

 });
&lt;/script&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-components-icon-default" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-components-icon-default">
          <span class="kss-title__ref">
              2.4.2
            <span class="kss-title__permalink-hash">
                #components.icon.default
            </span>
          </span>
          Default icon.
        </a>
      </h3>


      <div class="kss-description">
        <p>Default icon style.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="icon empty-m color-black">
    <div class="kss-icon--default">.icon-default</div>
    <i class="fa fa-hand-spock-o icon-default"></i>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;icon empty-m color-black&quot;&gt;
    &lt;div class=&quot;kss-icon--default&quot;&gt;.icon-default&lt;/div&gt;
    &lt;i class=&quot;fa fa-hand-spock-o icon-default&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
